<template>
  <div class="age-range-select">
    <el-input-number
      placeholder="请输入"
      v-model="input1"
      :min="0"
      :max="input1Max"
      :controls="false"
    />
    <span class="split">-</span>
    <el-input-number
      placeholder="请输入"
      v-model="input2"
      :min="input2Min"
      :max="100"
      :controls="false"
    />
  </div>
</template>
<script setup>
import dayjs from 'dayjs'
const emit = defineEmits(['update:begin', 'update:end'])
const props = defineProps({
  begin: {
    type: [Number, String]
  },
  end: {
    type: [Number, String]
  }
})
console.log('props.max',props.min,props.max);
const input1 = computed({
  get(val) {
    return props.begin ? props.begin : undefined
  },
  set(val) {
    if (val) {
      emit('update:begin', val)
    }
  }
})
const input2 = computed({
  get(val) {
    return props.end ? props.end : undefined
  },
  set(val) {
    if (val) {
      emit('update:end', val)
    }
  }
})
const input1Max = computed(()=>{
    return input2.value ? input2.value : 100
})
const input2Min = computed(()=>{
    return input1.value ? input1.value : 0
})
</script>
<style lang="scss" scoped>
.age-range-select{
    display: flex;
    align-items: center;
    width: 200px;
    .split{
        margin: 0 10px;
        font-size: 12px;
        color: #777;
    }
}
</style>
